<template>
    <div>
        <back></back>
        <div class="identify">
            <p>输入验证码</p>
            <div class="code">
                <p>验证码已发送至 +86 {{ phoneNumber }}</p>
                <div class="d-flex input-list">
                    <span
                        v-for="(item, index) in identifyCode"
                        :key="index"
                    >{{ item }}</span>
                </div>
                <div
                    class="d-flex border-list"
                    @click="onFocus"
                >
                    <span
                        v-for="(item, index) in 6"
                        :key="index"
                    ></span>
                </div>
                <input
                    type="digit"
                    @input="bindCodeInput"
                    maxlength="6"
                    :focus="focus"
                />
                <p v-if="ifShow">接收短信大约需要{{ time }}s</p>
                <p
                    v-else
                    @click="restart"
                >重新获取验证码</p>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            phoneNumber: "",
            time: 59,
            code: {},
            identifyCode: "",
            ifShow: true,
            focus: true
        };
    },
    onLoad(e) {
        this.phoneNumber = e.phoneNumber || "15822759676";
        this.countDown();
        this.getPhoneCode();
    },
    watch: {
        identifyCode(val) {
            if (val.length === 6) {
                this.noPasswordLogin();
            }
        }
    },
    methods: {
        bindCodeInput(e) {
            this.identifyCode = e.mp.detail.value;
        },
        onFocus() {
            this.focus = true;
        },
        // 无密登录
        noPasswordLogin() {
            this.$http
                .post({
                    url: this.$services.NO_PASSWORD_LOGIN,
                    data: {
                        appid: "wxac10e0b6b389fe20",
                        appletCode: this.globalData.appletCode,
                        code: this.identifyCode,
                        registerSource: 1,
                        mobile: this.phoneNumber
                    }
                })
                .then(res => {
                    wx.setStorageSync("token", res.sid);
                    wx.setStorageSync("userInfo", res.user);
                    wx.reLaunch({
                        url: "/pages/index/main"
                    });
                });
        },
        /// 验证码倒计时
        countDown() {
            var count = setInterval(() => {
                this.time--;
                if (this.time === 0) {
                    clearInterval(count);
                    this.ifShow = false;
                }
            }, 1000);
        },
        // 获取手机验证码
        getPhoneCode() {
            this.$http.post({
                url: this.$services.GET_PHONE_CODE,
                data: {
                    mobile: this.phoneNumber,
                    type: 0
                }
            });
        },
        // 重新获取验证码
        restart() {
            this.ifShow = true;
            this.time = 59;
            this.countDown();
            this.getPhoneCode();
        }
    }
};
</script>
<style lang="scss" scoped>
.identify {
    padding: 90px 10px 0;
    > p {
        font-size: 24px;
        margin-bottom: 15px;
    }
    .code {
        .common {
            width: 40px;
            text-align: center;
            margin-right: 15px;
        }
        .input-list {
            margin-top: 40px;
            span {
                @extend .common;
            }
        }
        .border-list {
            margin-bottom: 15px;
            span {
                @extend .common;
                height: 1px;
                background-color: #c7d9cf;
            }
        }
        input {
            position: absolute;
            left: -200%;
            opacity: 0;
            height: 0;
        }
    }
}
</style>
